@use '@angular/material' as mat;
@mixin builder-sidebar($background, $foreground, $primary) {
  .mat-drawer {
    &.sidebar-drawer {
      border-right: 0;
      &.opened {
        box-shadow: 1px 1px 6px 0px rgb(48 48 48 / 20%);
        transition: box-shadow 0.1s ease-in;
      }
      &.closed {
        box-shadow: 1px 1px 6px 0px rgb(48 48 48 / 50%) !important;
        transition: box-shadow 0.1s ease-out;
      }
    }
  }
  .builder-sidebar {
    background-color: mat.m2-get-color-from-palette($background, background);
    .icon-menu,
    .accordion-menu {
      @include scrollbar(mat.m2-get-color-from-palette($foreground, divider, 0.2));
    }
    &.closed {
      background-color: #272727;
      color: #f5f5f5;
      @include mat.elevation(4, mat.m2-get-color-from-palette($background, focused-button), 0.4);
      a.logo {
        background-color: #373737;
        transition: background-color 0.2s ease-in-out;
        &:hover {
          background-color: #272727;
        }
      }
      .mat-divider {
        border-top-color: rgba(255, 255, 255, 0.2);
      }
      .icon-menu {
        .item {
          &:hover,
          &:focus {
            > .custom-icon {
              color: #fff;
              &::after {
                background-color: rgba(#fff, 0.1);
              }
            }
          }

          &.active {
            > .custom-icon {
              color: mat.m2-get-color-from-palette($primary, default-contrast);
              &::after {
                background-color: mat.m2-get-color-from-palette($primary);
              }
            }
          }
        }
        .child {
          background-color: mat.m2-get-color-from-palette($background, card);
          color: mat.m2-get-color-from-palette($foreground, text, 0.75);
          @include mat.elevation(3, mat.m2-get-color-from-palette($foreground, divider, 0.7));
          .hover-menu {
            background-color: mat.m2-get-color-from-palette($background, card);
            @include scrollbar(mat.m2-get-color-from-palette($foreground, divider));
            .child-menu {
              .mdc-list-item {
                &.active,
                &:hover {
                  .mdc-list-item__primary-text {
                    color: mat.m2-get-color-from-palette($primary);
                  }
                  &:after {
                    background-color: mat.m2-get-color-from-palette($primary, 0.1);
                  }
                }
                .mdc-list-item__primary-text {
                  color: mat.m2-get-color-from-palette($foreground, text, 0.75);
                }
                &:hover {
                  &:after {
                    background-color: mat.m2-get-color-from-palette($primary, 0.1);
                  }
                }
              }
            }
          }
        }
      }
      .bottom {
        .icon-actions {
          .mdc-icon-button {
            color: #fff;
          }
        }
        .toggle {
          .wrapper {
            color: #fff;
          }
        }
      }
    }
    &.opened {
      .accordion-menu {
        app-icon {
          color: mat.m2-get-color-from-palette($foreground, text, 0.7);
        }
        > .mat-accordion {
          > .mat-mdc-list {
            &.no-child {
              a {
                color: mat.m2-get-color-from-palette($foreground, text, 0.75);
              }
              &.active {
                a,
                .mat-icon {
                  color: mat.m2-get-color-from-palette($primary);
                }
                &::after {
                  background-color: mat.m2-get-color-from-palette($primary);
                }
              }
            }
          }
        }
        .mat-accordion {
          > .mat-mdc-list {
            &.active {
              &::before {
                background-color: mat.m2-get-color-from-palette($primary);
              }
            }
          }
          .mat-expansion-panel {
            background-color: mat.m2-get-color-from-palette($background, background);
            .mat-expansion-panel-header {
              a {
                color: mat.m2-get-color-from-palette($foreground, text, 0.75);
              }
              .mat-expansion-panel-header-title {
                color: mat.m2-get-color-from-palette($foreground, text, 0.75);
              }
              .mat-expansion-indicator {
                &::after {
                  color: mat.m2-get-color-from-palette($foreground, text, 0.75);
                }
              }
            }
            &.active {
              .mat-expansion-panel-header {
                background-color: mat.m2-get-color-from-palette($background, hover);
                &::after {
                  background-color: mat.m2-get-color-from-palette($primary);
                }
              }
            }
          }
        }
        .mat-mdc-list {
          .mat-mdc-list-item {
            color: mat.m2-get-color-from-palette($foreground, text, 0.5);
            a {
              color: mat.m2-get-color-from-palette($foreground, text, 0.75);
              &.active {
                color: mat.m2-get-color-from-palette($primary);
              }
            }
            &:hover {
              a,
              .mat-mdc-list-item-icon {
                color: mat.m2-get-color-from-palette($primary);
              }
              &:after {
                background-color: mat.m2-get-color-from-palette($primary, 0.1);
              }
            }
          }
          &.active {
            .mat-mdc-list-item {
              .mat-mdc-list-item-icon {
                color: mat.m2-get-color-from-palette($primary);
              }
            }
          }
        }
      }
    }
    .bottom {
      .icon-actions {
        .mdc-icon-button {
          color: mat.m2-get-color-from-palette($foreground, text, 0.75);
        }
      }
      .toggle {
        .wrapper {
          color: mat.m2-get-color-from-palette($foreground, text, 0.75);
          .mat-icon {
            @include mat.elevation(4, mat.m2-get-color-from-palette($foreground, text), 0.3);
            transition: all 0.1s ease;
          }
          &:hover {
            .mat-icon {
              background-color: mat.m2-get-color-from-palette($foreground, base, 0.85);
              color: mat.m2-get-color-from-palette($primary, 50);
            }
          }
        }
      }
    }
  }
}
